import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:gourmet/color/hex.dart';
import 'package:gourmet/route/index.dart';
import 'package:gourmet/utils/colors.dart';
import 'package:gourmet/utils/radian.dart';
import 'package:gourmet/utils/styles.dart';

class ShopCartEditContoller extends GetxController {}

class ShopCartEditPage extends GetView<ShopCartEditContoller> {
  const ShopCartEditPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: HexColor(ColorsUtils.colorF7f7),
      appBar: PreferredSize(
          preferredSize: Size.fromHeight(44 + Get.mediaQuery.padding.top),
          child: AnnotatedRegion<SystemUiOverlayStyle>(
              value: SystemUiOverlayStyle.dark,
              child: Padding(
                padding: EdgeInsets.only(
                    top: Get.mediaQuery.padding.top, left: 15, right: 15),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    GestureDetector(
                      onTap: Get.back,
                      child: Center(
                          child: Text.rich(TextSpan(children: [
                        WidgetSpan(
                            child: Icon(
                              CupertinoIcons.chevron_back,
                              size: 18,
                              color: HexColor(ColorsUtils.color0000),
                            ),
                            alignment: PlaceholderAlignment.middle),
                        TextSpan(
                            text: ' 购物车',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color0000,
                                fontSize: StylesUtils.fontSize16,
                                fontWeight: FontWeight.w700))
                      ]))),
                    ),
                    GestureDetector(
                      child: Center(
                        child: Text.rich(TextSpan(children: [
                          TextSpan(
                              text: '完成',
                              style: StylesUtils.customTextStyle(
                                  fontSize: StylesUtils.fontSize15,
                                  color: ColorsUtils.color0000))
                        ], recognizer: TapGestureRecognizer()..onTap = () {})),
                      ),
                      onTap: () {
                        Get.toNamed(Routes.shopCartSubmit);
                      },
                    )
                  ],
                ),
              ))),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              margin: const EdgeInsets.only(top: 10),
              alignment: Alignment.center,
              child: Container(
                width: 345,
                padding: const EdgeInsets.all(15),
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(10)),
                child: Column(
                  children: [
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        checkbox,
                        Expanded(
                            child: Padding(
                          padding: const EdgeInsets.only(left: 10),
                          child: Column(
                            children: [
                              Align(
                                alignment: Alignment.topLeft,
                                child: Text.rich(TextSpan(children: [
                                  TextSpan(
                                      text: '华莱士-凤凰广场2店 ',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize15,
                                          color: ColorsUtils.color0000,
                                          fontWeight: FontWeight.w700)),
                                ])),
                              ),
                            ],
                          ),
                        ))
                      ],
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(vertical: 15),
                      child: Row(
                        children: [
                          GestureDetector(
                              onTap: () {},
                              child: Icon(
                                CupertinoIcons.checkmark_alt_circle_fill,
                                size: 20,
                                color: HexColor(ColorsUtils.colorFf64),
                              )),
                          Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 10),
                            child: Image.network(
                              'https://img1.baidu.com/it/u=4078247928,1880753920&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
                              width: 60,
                              height: 60,
                              fit: BoxFit.fill,
                            ),
                          ),
                          Expanded(
                              child: Column(
                            children: [
                              Align(
                                  alignment: Alignment.topLeft,
                                  child: Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      Text(
                                        '香辣鸡块汉堡包',
                                        style: StylesUtils.customTextStyle(
                                            fontSize: StylesUtils.fontSize16,
                                            color: ColorsUtils.color0000),
                                      ),
                                      Text(
                                        '￥25',
                                        softWrap: true,
                                        style: StylesUtils.customTextStyle(
                                            color: ColorsUtils.color0000,
                                            fontSize: StylesUtils.fontSize15,
                                            fontWeight: FontWeight.w700),
                                      )
                                    ],
                                  )),
                              Padding(
                                padding: const EdgeInsets.only(top: 20),
                                child: Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    Text(
                                      'x 1',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize15,
                                          fontWeight: FontWeight.w700,
                                          color: ColorsUtils.color0000),
                                    ),
                                  ],
                                ),
                              )
                            ],
                          ))
                        ],
                      ),
                    ),
                    Row(
                      children: [
                        checkbox,
                        Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 10),
                          child: Image.network(
                            'https://img1.baidu.com/it/u=3313129129,265706034&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
                            width: 60,
                            height: 60,
                            fit: BoxFit.fill,
                          ),
                        ),
                        Expanded(
                            child: Column(
                          children: [
                            Align(
                                alignment: Alignment.topLeft,
                                child: Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    Text(
                                      '百事可乐',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize16,
                                          color: ColorsUtils.color0000),
                                    ),
                                    Text(
                                      '￥8',
                                      softWrap: true,
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color0000,
                                          fontSize: StylesUtils.fontSize15,
                                          fontWeight: FontWeight.w700),
                                    )
                                  ],
                                )),
                            Container(
                              margin: const EdgeInsets.only(top: 20),
                              alignment: Alignment.centerLeft,
                              child: Text(
                                'x 1',
                                style: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize15,
                                    fontWeight: FontWeight.w700,
                                    color: ColorsUtils.color0000),
                              ),
                            )
                          ],
                        ))
                      ],
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(vertical: 15),
                      child: Row(
                        children: [
                          GestureDetector(
                              onTap: () {},
                              child: Icon(
                                CupertinoIcons.checkmark_alt_circle_fill,
                                size: 20,
                                color: HexColor(ColorsUtils.colorFf64),
                              )),
                          Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 10),
                            child: Image.network(
                              'https://img1.baidu.com/it/u=4078247928,1880753920&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
                              width: 60,
                              height: 60,
                              fit: BoxFit.fill,
                            ),
                          ),
                          Expanded(
                              child: Column(
                            children: [
                              Align(
                                  alignment: Alignment.topLeft,
                                  child: Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      Text(
                                        '香辣鸡翅',
                                        style: StylesUtils.customTextStyle(
                                            fontSize: StylesUtils.fontSize16,
                                            color: ColorsUtils.color0000),
                                      ),
                                      Text(
                                        '￥20',
                                        softWrap: true,
                                        style: StylesUtils.customTextStyle(
                                            color: ColorsUtils.color0000,
                                            fontSize: StylesUtils.fontSize15,
                                            fontWeight: FontWeight.w700),
                                      )
                                    ],
                                  )),
                              Padding(
                                padding: const EdgeInsets.only(top: 20),
                                child: Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    Text(
                                      'x 1',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize15,
                                          fontWeight: FontWeight.w700,
                                          color: ColorsUtils.color0000),
                                    ),
                                  ],
                                ),
                              )
                            ],
                          ))
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: 10),
              alignment: Alignment.center,
              child: Container(
                width: 345,
                padding: const EdgeInsets.all(15),
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(10)),
                child: Column(
                  children: [
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        checkbox,
                        Expanded(
                            child: Padding(
                          padding: const EdgeInsets.only(left: 10),
                          child: Column(
                            children: [
                              Align(
                                alignment: Alignment.topLeft,
                                child: Text.rich(TextSpan(children: [
                                  TextSpan(
                                      text: '华莱士 (中山公园店)',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize15,
                                          color: ColorsUtils.color0000,
                                          fontWeight: FontWeight.w700)),
                                ])),
                              ),
                            ],
                          ),
                        ))
                      ],
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 15),
                      child: Row(
                        children: [
                          GestureDetector(
                              onTap: () {},
                              child: Icon(
                                CupertinoIcons.checkmark_alt_circle_fill,
                                size: 20,
                                color: HexColor(ColorsUtils.colorFf64),
                              )),
                          Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 10),
                            child: Image.network(
                              'https://img1.baidu.com/it/u=4078247928,1880753920&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
                              width: 60,
                              height: 60,
                              fit: BoxFit.fill,
                            ),
                          ),
                          Expanded(
                              child: Column(
                            children: [
                              Align(
                                  alignment: Alignment.topLeft,
                                  child: Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      Text(
                                        '香辣鸡翅',
                                        style: StylesUtils.customTextStyle(
                                            fontSize: StylesUtils.fontSize16,
                                            color: ColorsUtils.color0000),
                                      ),
                                      Text(
                                        '￥20',
                                        softWrap: true,
                                        style: StylesUtils.customTextStyle(
                                            color: ColorsUtils.color0000,
                                            fontSize: StylesUtils.fontSize15,
                                            fontWeight: FontWeight.w700),
                                      )
                                    ],
                                  )),
                              Padding(
                                padding: const EdgeInsets.only(top: 20),
                                child: Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    Text(
                                      'x 1',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize15,
                                          fontWeight: FontWeight.w700,
                                          color: ColorsUtils.color0000),
                                    ),
                                  ],
                                ),
                              )
                            ],
                          ))
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
      bottomNavigationBar: SafeArea(
        bottom: true,
        child: Container(
          height: 50,
          padding: const EdgeInsets.symmetric(horizontal: 15),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text.rich(TextSpan(children: [
                WidgetSpan(
                    child: checkbox, alignment: PlaceholderAlignment.middle),
                TextSpan(
                    text: ' 全选',
                    style: StylesUtils.customTextStyle(
                        color: ColorsUtils.color0000,
                        fontSize: StylesUtils.fontSize15))
              ])),
              Container(
                constraints:
                    const BoxConstraints.expand(width: 235, height: 40),
                alignment: Alignment.center,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    gradient: LinearGradient(
                        colors: [
                          //linear-gradient(90deg, rgba(255, 153, 0, 1) 0%, rgba(255, 153, 0, 1) 0%, rgba(254, 70, 1, 1) 100%, rgba(254, 70, 1, 1) 100%),
                          ColorsUtils.rgba(255, 153, 0, 1),
                          ColorsUtils.rgba(255, 153, 0, 1),
                          ColorsUtils.rgba(254, 70, 1, 1),
                          ColorsUtils.rgba(254, 70, 1, 1),
                        ],
                        stops: const [
                          0,
                          0,
                          1.0,
                          1.0
                        ],
                        transform:
                            GradientRotation(RadianUtils.angleToRadian(90)))),
                child: Text(
                  '删除',
                  softWrap: true,
                  style: StylesUtils.customTextStyle(
                    fontSize: StylesUtils.fontSize15,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget get checkbox {
    return Container(
      constraints: const BoxConstraints.expand(width: 20, height: 20),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          border: Border.all(color: HexColor(ColorsUtils.colorCccc))),
    );
  }
}
